<template>
	<uni-popup ref="popup" :safe-area="false" type="bottom" class="picker-box" @maskClick="close" @change="change">
		<view class="picker-head flex-r ac">
			<text class="text-primary" @tap="toggle(false)">取消</text>
			<text class="text-bold">设置赛前提醒时间</text>
			<text class="text-primary color-blue" @tap="confirm">确定</text>
		</view>
		<picker-view class="picker-view" indicator-class="indicator" :value="select" @change="bindChange">
			<picker-view-column>
				<view class="picker-item flex-r ac jc" v-for="(item,index) in timeList" :key="index">
					<text>{{item.name}}</text>
				</view>
			</picker-view-column>
		</picker-view>
		<view class="bottom-ios"></view>
	</uni-popup>
</template>

<script>
	/**
	 * MatchList 比赛提醒
	 * @description 用户关注比赛时选择开赛提醒时间
	 * @property {String} datetime 比赛开始时间
	 * @example <MatchRemind :datetime="datetime"></MatchRemind> 
	 */
	export default {
		name:"MatchRemind",
		emits: ['close', 'submit'],
		props: {
			datetime: {
				type: String,
				default: '0000-00-00 00:00:00'
			}
		},
		data() {
			return {
				select: [0],
				timeList: [],
				maxMinute: 24*60,
			};
		},
		mounted() {
			this.getRemindTime();
			//计算比赛开始时间与当前时间差
			let timeDiff = new Date(this.datetime.replace(/-/ig, '/')) - new Date()
			this.maxMinute = Math.floor(timeDiff / (60*1000))
		},
		methods: {
			/**
			 * @description 查询提醒时间规则
			 */
			getRemindTime() {
				this.$http.get({
					url: '/api/dict/info',
					data: {
						code: 'match_defore_remind'
					}
				}).then((data) => {
					console.log(data,'提醒时间');
					if(data.success && data.result){
						this.timeList = data.result
						this.select = [0]
						this.toggle(true)
					}else{
						this.$ShowToast({text: '数据加载失败', type: 2})
						this.toggle(false)
					}
				})
			},
			/**
			 * @description 弹窗开关
			 * @param {boolean} status 开关状态
			 */
			toggle(status){
				if(status){
					this.$refs.popup.open()
				}else{
					this.$refs.popup.close()
					this.close()
				}
			},
			/**
			 * @description 选择回调
			 * @param {object} event
			 */
			bindChange(event) {
				this.select = event.detail.value
				if(Number(this.timeList[this.select[0]].value) > this.maxMinute){
					this.$ShowToast({text: '提醒时间不能早于当前时间', type: 2})
					this.select = [0]
				}
			},
			/**
			 * @description 确认提交
			 */
			confirm() {
				if(Number(this.timeList[this.select[0]].value) > this.maxMinute){
					this.$ShowToast({text: '提醒时间不能早于当前时间', type: 2})
				}else{
					let datetime = new Date(this.datetime.replace(/-/ig, '/')) - Number(this.timeList[this.select[0]].value) * 60 * 1000;
					let today = new Date(datetime);
					//日期
					let yyyy = today.getFullYear();
					let MM = String(today.getMonth() + 1).padStart(2, '0');
					let DD = String(today.getDate()).padStart(2, '0');
					// 时间
					let hh =  String(today.getHours()).padStart(2, '0');
					let mm = String(today.getMinutes()).padStart(2, '0');
					let ss = String(today.getSeconds()).padStart(2, '0');
					today = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
					this.$emit('submit', today)
					this.toggle(false)
				}
			},
			/**
			 * @description 弹窗状态变化回调
			 * @param {object} e
			 */
			change(e){
				if(!e.show){
					this.close()
				}
			},
			/**
			 * @description 触发关闭弹窗事件
			 */
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker-box{
		z-index: 1000;
		/deep/ .bottom{
			max-width: $max-width;
			margin: $pc-margin;
		}
		.picker-head{
			height: 96rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0 20rpx;
			.text-bold{
				flex: 2;
				text-align: center;
				font-size: 36rpx;
			}
		}
		.picker-info{
			height: 80rpx;
			background: #F2F5FA;
			padding: 0 135rpx;
			text{
				width: 240rpx;
				text-align: center;
				line-height: 80rpx;
				color: #939599;
			}
		}
		.picker-view {
			height: 655rpx;
			background-color: #FFFFFF;
			border-top: 1px solid #EDEDED;
			//padding: 0 20rpx;
			.column{
				width: 240rpx;
				&.left{
					.picker-item{
						padding-left: 115rpx;
					}
					/deep/ .indicator{
						border-radius: 48rpx 0 0 48rpx;
					}
				}
				&.right{
					.picker-item{
						padding-right: 115rpx;
					}
					/deep/ .indicator{
						border-radius: 0 48rpx 48rpx 0;
					}
				}
			}
			.picker-item {
				height: 96rpx;
				font-size: 30rpx;
			}
			/deep/ .indicator{
				height: 96rpx;
				color: #333333;
				font-weight: 500;
				z-index: 10;
			}
			/deep/ .indicator:before{
				border-color: #ccc;
			}
			/deep/ .indicator:after{
				border-color: #ccc;
			}
		}
		.bottom-ios{
			background-color: #fff;
		}
	}
</style>